<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item style="display: none">
        <a-input v-decorator="['code']" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题">
        <a-input
          placeholder="请输入标题"
          v-decorator="['title', { rules: [{ required: true, message: '请输入标题' }] }]"
        />
        <a-input hidden v-decorator="['id']"></a-input>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="height: 104px" label="图片">
        <UploadImg v-model="imageUrl" warehouse cropper :width="364" :height="208" :fileSize="20" :cropperEnlarge="2.5">
          <template #tips>910*520</template>
        </UploadImg>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="日期">
        <a-date-picker
          format="YYYY-MM-DD"
          style="width: 100%"
          valueFormat="YYYY-MM-DD"
          :disabled-date="disabledDate"
          v-decorator="['date', { rules: [{ required: true, message: '请选择日期' }] }]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { elegantlAdd, elegantlEdit } from '@/api/system/system'
import pick from 'lodash.pick'
import moment from 'moment'
import UploadImg from '@/components/UpFile/uploadImg'

export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      loading: false,
      imageUrl: '',
      title: '',
      type: '',
      form: this.$form.createForm(this),
    }
  },
  beforeCreate() {},
  created() {},
  methods: {
    moment,
    disabledDate(current) {
      return current && current >= this.moment().endOf('day')
    },
    add(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(obj.data, 'pid'))
      })
    },
    edit(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.imageUrl = obj.data.image
        this.form.setFieldsValue(pick(obj.data, 'id', 'title', 'date', 'image'))
      })
    },

    handleSubmit(e) {
      var _this = this
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = JSON.parse(JSON.stringify(values))
          params.image = _this.imageUrl
          _this.confirmLoading = true
          if (_this.type === 'add') {
            return elegantlAdd(params)
              .then((res) => {
                _this.$message.success('新增成功')
                _this.$emit('add')
                _this.visible = false
              }).finally(() => {
                _this.confirmLoading = false
              })
          } else {
            return elegantlEdit(params)
              .then((res) => {
                _this.$message.success('新增成功')
                _this.$emit('upd')
                _this.visible = false
              }).finally(() => {
                _this.confirmLoading = false
              })
          }
        }
      })
    },
  },
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.avatar-uploader > .ant-upload img {
  height: 86px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
